<template>
  <div>
    <div class="common-container goodslist-container">
      <!--条件-->
      <div class="goodslist-menu">
        <div class="goodslist-header">
          <p><a href="/">商品目录</a>  &gt; 一级目录 &gt; 2级目录</p>
        </div>
        <div class="goodslist-body">
          <form class="layui-form" action="http://baota.111zh.cn/goodscate/:pid.html" method="post" id="queryForm" name="queryForm">
            <input type="hidden" name="pid" value="1">
            <input type="hidden" name="cid" value="2">
            <input type="hidden" name="rid" value="">
            <input type="hidden" name="_order_field" value="">
            <input type="hidden" name="_order_way" value="DESC">
            <input type="hidden" name="_p" value="1">
          </form>
        </div>
      </div>
      <!--商品列表-->
      <div class="goodslist-box">
        <div class="goodsbox-header">
          <ul>
            <li class="choose-menu-active"><a href="javascript:void(0);" data-type="sort" data-key="" data-value="">综合排序<span>↑</span></a></li>
            <li><a href="javascript:void(0);" data-type="sort" data-key="sj" data-value="">上架时间</a></li>
            <li><a href="javascript:void(0);" data-type="sort" data-key="xl" data-value="">销量</a></li>
            <!-- <li><a href="javascript:void(0);" data-type="sort" data-key="pj" data-value="">评价</a></li> -->
          </ul>
          <!--          <img src="./易购卡卡盟系统-搭建卡盟系统首选易购卡_files/new.gif">-->
        </div>
        <div class="goodsbox-container">
          <div class="goodsbox-items" v-for="(tab, idx) in tableData">
            <div class="goodsbox-left">
              <a href="javascript:void(0);">
                <img src="http://img.111zh.cn/Uploads/Attachment/2021-07-21/60f79e4bc590f.jpg" :alt="tab.goodsName" :title="tab.goodsName">
              </a>
            </div>
            <div class="goodsbox-goodsinfo" style="top:15px;">
              <!--<h6><a href="/product/1.html" title="178231237517823123751782312375178231237517823123751782312375" style="color:#000" target="_blank">178231237517823123751782312375178231237517823123751782312375</a></h6>-->
              <h6><a href="javascript:void(0);" :title="tab.goodsName" style="color:#000">{{ tab.goodsName }}</a></h6>
              <p>商品编号：{{tab.goodsID}}</p>
              <div>
                <span class="badge-auth" style="background: #52ccba;">卡密商品</span>

              </div>
              <!--<p>近期已出售<span>24</span>次<span style="margin-left: 20px;color: #0e0e0e">库存:24个</span></p>-->

            </div>
            <div class="goodsbox-price">
              <p class="overwords">单价：<span>{{tab.goodsPrice}}</span>元</p>

              <p class="overwords">库存：<span><a style="color:red;">{{ tab.cardNum }}</a>个</span>                                </span></p>
            </div>
            <div class="goodsbox-collect">
              <i class="iconfont icon-aixin2"></i>
            </div>
            <div class="goodsbox-price" style="width: 80px;height: 20px;padding: 41px 0;left: 22px;">
              <span class="badge-auth badge-auth-b">自动发货</span>                            </div>
            <div class="goodsbox-btn">
              <!---->
              <!--<a class="layui-btn layui-btn-normal layui-btn-sm" href="/product/1.html" target="_blank">立即购买</a>-->
              <!---->
              <!-- <a v-if="row.cardNum && row.goodsState === 1" :href="`/submit?id=${row.goodsID}`" -->
              <a v-if="tab.cardNum" :href="`/submit4?id=${tab.goodsID}`"
              >
                <el-button size="small" type="primary">提取卡密</el-button></a
              >
              <el-button v-else size="small" disabled>提取卡密</el-button>
            </div>
          </div>
          <!--          <div id="goodslistpage" class="pagebox"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="2">下一页</a></div></div>-->
        </div>
        <div class="goodsbox-container" v-if="tableData.length===0" >
          暂无数据
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Recommends from '@/components/recommends'
import pageMixin from '@/mixins/page'
import {mapState} from 'vuex'

export default {
  layout: "webin24",
  components: {
    Recommends
  },
  mixins: [pageMixin],
  data() {
    return {
      isLoading: true,
      recommendsCategory: [],
      searchText: '',
      tableData: []
    }
  },
  created() {
    const {
      query: { keywords }
    } = this.$route
    if (keywords) {
      this.searchText = keywords
    }
    this.getList()
  },
  methods: {
    async getList() {
      this.isLoading = true
      const {
        query: { categoryId, recommend, recommendId }
      } = this.$route
      let url = ''
      let params = {}
      if (recommend) {
        url = '/goods/goods/catalogGoodsRecommendPage'
      } else if (recommendId) {
        url = '/goods/goods/getGoodsRecommendByCRIDClient'
        params.crID = recommendId
        const res = await this.$axios.get(url, { params })
        if (res.code === 1001 && res.body) {
          this.tableData = res.body
        }
        this.isLoading = false
        return
      } else {
        url = '/goods/goods/goodsPageClient'
        params = { pageNum: 1, pageSize: 20 }
        if (categoryId) {
          params.catalogID = categoryId
        }
        if (this.searchText) {
          params.goodsName = this.searchText
        }
      }
      const res = await this.$axios.post(url, null, { params })
      if (res.code === 1001 && res.body) {
        if (recommend) {
          this.tableData = res.body.records.map((item) => {
            return item.goodsShowVO
          })
        } else {
          this.tableData = res.body.records
        }
      }
      this.isLoading = false
    },
    doSearch() {
      if (!this.searchText) {
        return this.$message.error('请输入关键字')
      }
      location.href = `/goods-list?keywords=${this.searchText}`
    },
    detail(row) {
      this.$alert(
        `<h4>${row.goodsName}</h4><p>注意事项：${row.goodsNote}</p><p>商品介绍：${row.remark}</p>`,
        '商品信息',
        {
          dangerouslyUseHTMLString: true
        }
      )
    }
  },
  computed: {
    ...mapState({
      searchGoodsTxt: 'searchGoodsTxt'
    })
  },
  watch: {
    searchGoodsTxt (val) {
      this.searchText = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
section + section {
  margin-top: 15px;
}
.search {
  padding: 10px 15px;
  background: white;
  .el-input {
    width: 400px;
  }
}
.goods {
  background: white;
  .el-pagination {
    text-align: right;
    padding: 20px;
  }
}
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
@import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
@import 'element-ui/lib/theme-chalk/index.css';
</style>
